$(function () {
    var arr = JSON.parse(localStorage.getItem('shopArr'))
    var oList = document.querySelector('.zfg_tbody1')
    // 渲染数据
    arr.forEach(function (ele) {
        let str = `<tr class="zfg_product1" data-id="${ele.id}">
                <td class="zfg_td_1">
                    <input type="checkbox" name="cartCheckBox" value="product1">
                </td>
                <td class="zfg_td_2">
                    <img
                        src="${ele.img}">
                </td>
                <td class="zfg_td_4">
                    <a href="#">${ele.title}</a>
                <td class="zfg_td_5">${ele.price}</td>
                <td class="zfg_td_6">
                    <button class="zfg_jian">-</button>
                    <input type="text" id="num_1" value="${ele.count}" class="zfg_num_input" readonly="readonly">
                    <button class="zfg_jia">+</button>
                </td>
                <td class="zfg_td_7"></td>
                <td class="zfg_td_8">
                    <a href="javascript:void(0):" class="zfg_del">删除</a>
                </td>
            </tr>`

        oList.innerHTML += str
    })

    var oInpAll = document.querySelector('#zfg_allCheckBok')
    var total = document.querySelector('#zfg_total')
    var aInp = document.querySelectorAll('.zfg_td_1 input[type=checkbox]')
    var count = 0
    // 全选反选
    oInpAll.addEventListener('change', function () {
        if (this.checked) {
            aInp.forEach(function (ele) {
                ele.checked = true
                count = aInp.length
            })
            prodC()
        } else {
            aInp.forEach(function (ele) {
                ele.checked = false
                count = 0
            })
            $("#zfg_total").text(0);
        }

    })

    // 计数选中
    aInp.forEach(function (ele, index) {
        ele.addEventListener('change', function () {
            // 算总价
            let id = this.parentNode.parentNode.getAttribute('data-id')
            if (ele.checked) {
                count++
                arr.forEach(function (ele, index) {
                    if (ele.id === id) {
                        ele.flag = true
                        total.innerHTML = (Number(total.innerHTML) + ele.price
                            .slice(1) * ele.count).toFixed(2)
                    }
                })
                console.log(arr)
            } else {
                count--
                arr.forEach(function (ele, index) {
                    if (ele.id === id) {
                        total.innerHTML -= ele.price.slice(1) * ele.count
                    }
                })
            }
            if (count === aInp.length) {
                oInpAll.checked = true
            } else {
                oInpAll.checked = false
            }
        })
        prodC()
    })


    //计算总价与小计
    function prodC() {
        var $tr = $("#zfg_shopping").find("tr[class]");
        var summer = 0;
        $tr.each(function (i, dom) {
            var num = $(dom).children(".zfg_td_6").find("input").val(); //商品数量
            var price = num * $(dom).children(".zfg_td_5").text().slice(1); //商品小计
            $(dom).children(".zfg_td_7").html(price); //显示商品小计
            summer += price; //总价
        });
        $("#zfg_total").text(summer);

    }
    prodC(); //页面加载完成后运行

    //商品增加减少 ，flag 为true时增加 flag为false时减少
    function changN(dom, flag) {
        var $input = $(dom).parent().find("input");
        var value = $input.val();
        if (flag) {
            value++;
        } else {
            value--;
            if (value < 0) {
                value = 0;
                alert("宝贝数量不能为负值")
            }
        }
        $input.val(value);


        prodC();
    };

    //点击增加
    $(".zfg_td_6").find("button[class='zfg_jian']").click(function () {
        changN(this, false);
    });
    //点击减少
    $(".zfg_td_6").find("button[class='zfg_jia']").click(function () {
        changN(this, true);
    });

    oList.addEventListener('click', function (ev) {

        if (ev.target.className === 'zfg_del') {
            ev.target.parentNode.parentNode.remove()
            var id = ev.target.parentNode.parentNode.getAttribute('data-id')
            arr.forEach(function (ele, index) {
                if (ele.id === id) {
                    arr.splice(index, 1)
                }
            })
            localStorage.setItem('shopArr', JSON.stringify(arr))
            prodC();
        }
        //点击删除所选
    })
    var deleteAll = document.querySelector("#zfg_shopping")
    deleteAll.addEventListener('click', function (ev) {
    if (ev.target.className === 'zfg_deleteAll') {
        $("#zfg_total").text(0);
        ev.target.parentElement.parentElement.parentElement.previousElementSibling.remove()
        arr = []
        localStorage.setItem('shopArr', JSON.stringify(arr))
    }
})
})
